<template>
  <div class="login_wrap">
    <bg-canvans></bg-canvans>
    <div class="pos_form">
      <img src="../../assets/logo.png" alt="" />
      <h1>进思学员后台管理系统</h1>
      <div class="login_form">
        <el-form :rules="ruleObj" :model="formObj" ref="myForm">
          <el-form-item prop="userName">
            <el-input v-model="formObj.userName">
              <template slot="prepend">
                <i class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="formObj.password">
              <template slot="prepend">
                <i class="el-icon-lock"></i>
              </template>
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="veri">
            <div class="form_veri_wrap">
              <el-input class="form_veri" v-model="formObj.veri">
                <template slot="prepend">
                  <i class="el-icon-info"></i>
                </template>
              </el-input>
              <veri-com></veri-com>
            </div>
          </el-form-item>
          <div class="form_btn">
            <el-button type="primary">忘记密码?</el-button>
            <el-button type="success" @click="subMit('myForm')">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import bgCanvans from './bgCanvas.vue'
import veriCom from './veri.vue'
import { _checkVeri, _goLogin } from '../../api/common'
export default {
  components: { bgCanvans, veriCom },
  data () {
    return {
      formObj: {
        //发送数据
        userName: '',
        password: '',
        veri: ''
      },
      ruleObj: {
        //表单验证规则
        userName: [
          {
            required: true,
            message: '必须输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            pattern: /^\d{3,10}$/,
            message: '密码不符合规则',
            trigger: 'blur'
          },
          {
            required: true,
            message: '必填密码',
            trigger: 'blur'
          }
        ],
        veri: {
          required: true,
          message: '验证码必填',
          trigger: 'blur'
        }
      }
    }
  },
  methods: {
    subMit () {
      // 获取表单组件
      this.$refs.myForm.validate(async vali => {
        console.log(vali) //vali --true 表单全部通过
        // 验证通过才发送请求
        if (vali) {
          var veriRes = await _checkVeri(this.formObj.veri) //校验验证码接口
          console.log(veriRes)
          if (veriRes.data.err) {
            this.$message('验证码错误')
          }
          if (veriRes.data.success) {
            // 调用登录接口
            var loginRes = await _goLogin(this.formObj)
            console.log(loginRes)
            if (loginRes.data.success) {
              // 存储tokenid到localStorage
              localStorage.token = loginRes.data.tokenId
              this.$store.dispatch('ActionToken', loginRes.data.tokenId)
              this.$message.success('登录成功,正在跳转主页')
              this.$router.push('/layout')
            } else {
              this.$message.error('登录错误')
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="less">
.login_wrap {
  width: 100vw;
  height: 100vh;
  background: rgb(12, 24, 84);
  position: relative;
}
.pos_form {
  width: 50%;
  height: 450px;

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
  h1 {
    color: white;
  }
  img {
    width: 100px;
    height: 100px;
  }
  .login_form {
    width: 500px;
    margin: 20px auto;
    .form_btn {
      width: 600px;
      display: flex;
      margin-top: 20px;
      margin-left: -50px;
      justify-content: space-between;
    }
  }
  .form_veri_wrap {
    display: flex;
    height: 40px;
    .form_veri {
      width: 350px;
    }
  }
}
</style>
